<template>
  <div class="trends2-doctor-list-1" data-number="武德五年">
    <template v-for="itemInfo in doctorDataClean">
      <div class="first-group">
        <template v-for="item in itemInfo">
          <div class="doctor-info">
            <div class="left">
              <img :src="getDoctorPicture(item)" alt="医生" @error='handleError'/>
            </div>
            <div class="right">
              <div class="name-level-dept-wrap">
                <div class="item name-level">
                  <div class="item2 name">
                    {{ item.workerName || '\u00a0' }}
                  </div>
                  <div class="item2 level">
                    <ScrollX>{{ item.workerTitle || '\u00a0' }}</ScrollX>
                  </div>
                </div>
                <div class="item dept" v-if="optionsInfo.doctorDept">
                  <ScrollX>{{ item.deptName || '\u00a0' }}</ScrollX>
                </div>
              </div>
              <div class="patient-wrap">
                <template v-if="optionsInfo['registerShow']">
                  <div class="patient-register-info">
                    <div class="patient-info" :class="{'patient-info-only': !optionsInfo['waitPatientShow']}">
                      <div class="current-patient patient">
                        <div class="patient-type-sign">就诊&nbsp;:</div>
                        <div class="patient-content"
                             :class="{'current-patient-content':item.treatingPatient?.length>=2}">
                          <vue-seamless-scroll
                              class="scroll"
                              :ref="`scroll-${item.workerId}`"
                              :class-option="optionScroll"
                              :data="getPatientInfo('wait',item)"
                          >
                            <template v-for="itemPatient in getPatientInfo('wait',item)">
                              <div class="patient-item">
                                <template v-if="itemPatient.patientName">
                                  {{ itemPatient.patientName || '\u00a0' }}
                                </template>
                                <template v-if="itemPatient.orderNo">
                                  {{ `(${itemPatient.orderNo || '\u00a0' })` }}
                                </template>
                              </div>
                            </template>
                          </vue-seamless-scroll>
                        </div>
                      </div>
                      <div class="wait-patient patient" v-if="optionsInfo['waitPatientShow']">
                        <div class="patient-type-sign">候诊&nbsp;:</div>
                        <div class="patient-content"
                             :class="{'wait-patient-content':item.waitingPatientList?.length>=2}">
                          <vue-seamless-scroll
                              class="scroll"
                              :ref="`scroll-${item.workerId}`"
                              :class-option="optionScroll"
                              :data="getPatientInfo('current',item)"
                          >
                            <template v-for="itemPatient in getPatientInfo('current',item)">
                              <div class="patient-item">
                                <template v-if="itemPatient.patientName">
                                  {{ itemPatient.patientName || '\u00a0' }}
                                </template>
                                <template v-if="itemPatient.orderNo">
                                  {{ `(${itemPatient.orderNo || '\u00a0' })` }}
                                </template>
                              </div>
                            </template>
                          </vue-seamless-scroll>
                        </div>
                      </div>
                    </div>
                    <div class="register-info" data-register="号别信息">
                      <template v-if="item?.preTreatingPatient?.length">
                        <ScrollX>{{ item?.preTreatingPatient[0]?.registerObjName || '\u00a0' }}</ScrollX>
                      </template>
                    </div>
                  </div>
                </template>
                <template v-else>
                  <div class="patient-no-register-info">
                    <div class="current-patient patient">
                      <div class="patient-type-sign">就诊&nbsp;:</div>
                      <div class="patient-content" :class="{'current-patient-content':item.treatingPatient?.length>=2}">
                        <vue-seamless-scroll
                            class="scroll"
                            :ref="`scroll-${item.workerId}`"
                            :class-option="optionScroll"
                            :data="getPatientInfo('current',item)"
                        >
                          <template v-for="itemPatient in getPatientInfo('current',item)">
                            <div class="patient-item">
                              <template v-if="itemPatient.patientName">
                                {{ itemPatient.patientName || '\u00a0' }}
                              </template>
                              <template v-if="itemPatient.orderNo">
                                {{ `(${itemPatient.orderNo || '\u00a0' })` }}
                              </template>
                            </div>
                          </template>
                        </vue-seamless-scroll>
                      </div>
                    </div>
                    <div class="wait-patient patient" v-if="optionsInfo['waitPatientShow']">
                      <div class="patient-type-sign">候诊&nbsp;:</div>
                      <div class="patient-content"
                           :class="{'wait-patient-content':item.waitingPatientList?.length>=2}">
                        <vue-seamless-scroll
                            class="scroll"
                            :ref="`scroll-${item.workerId}`"
                            :class-option="optionScroll"
                            :data="getPatientInfo('wait',item)"
                        >
                          <template v-for="itemPatient in getPatientInfo('wait',item)">
                            <div class="patient-item">
                              <template v-if="itemPatient.patientName">
                                {{ itemPatient.patientName || '\u00a0' }}
                              </template>
                              <template v-if="itemPatient.orderNo">
                                {{ `(${itemPatient.orderNo|| '\u00a0' })` }}
                              </template>
                            </div>
                          </template>
                        </vue-seamless-scroll>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
import {v4 as uuid} from 'uuid';
import vueSeamlessScroll from 'vue-seamless-scroll';
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";

export default {
  name: "trends1DoctorList-5",

  componentName: "trends2DoctorList",

  components: {
    ScrollX,
    vueSeamlessScroll
  },

  props: {
    devType: {
      type: Boolean,
      default: false,
    },
    field: {
      type: Object,
      default: Object(),
    },
    doctorData: {
      type: Array,
      default: Array(),
    }
  },

  data() {
    return {
      status: true,
      widgetKey: uuid(),
      optionsInfo: Object(),
      header: require("@a/images/design/header.jpeg"),
    }
  },

  computed: {
    // 滚动设置
    optionScroll() {
      return {
        hoverStop: true,
        direction: 1,                 // 0向下 1向上 2向左 3向右
        isSingleRemUnit: true,
        step: [1, 1.5, 2, 2.5, 3][0], // 数值越大速度滚动越快
        limitMoveNum: 2,              // 开始无缝滚动的数据量 this.dataList.length
      };
    },

    // 医生列表数据处理
    doctorDataClean() {
      return this.$lodash.chunk(this.doctorData, 1)
    },

    // 获取医生头像
    getDoctorPicture() {
      return function (row) {
        let isPause = (row?.isPause);
        let header = '/tpleditor/resource/assets/images/header.png';
        if (!isPause) {
          return (row.workerPicture) || header
        } else {
          return this.pause;
        }
      }
    },

    // 候诊患者&就诊患者
    getPatientInfo() {
      return function (type, row) {
        switch (type) {
          case 'current':
            if (row?.treatingPatient.length) {
              return row.treatingPatient.slice(0, 1)
            } else {
              return []
            }
          case 'wait':
            if (row?.waitingPatientList.length) {
              return row.waitingPatientList.slice(0, 1)
            } else {
              return []
            }
        }
      }
    }
  },

  mounted() {
  },

  methods: {
    // 图片加载异常处理
    handleError(event) {
      event.target.src = '/tpleditor/resource/assets/images/header.png'
    },
  },

  watch: {
    field: {
      handler: function (val) {
        let key = (val.options.config)
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true
    }
  }

};
</script>

<style lang="scss" scoped>
.trends2-doctor-list-1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;

  .first-group {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    flex-grow: 1;
    box-sizing: border-box;
    margin-bottom: 24px;
    overflow: hidden;
    flex-basis: calc((100% - 24px - 24px - 24px - 24px) / 5);

    &:last-child {
      margin-bottom: 0;
    }

    .doctor-info {
      flex: 1;
      flex-shrink: 0;
      flex-basis: 0;
      height: calc(100%);
      background: white;
      border-radius: 18px;
      overflow: hidden;
      padding: 20px 24px;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;

      .left {
        box-sizing: border-box;
        overflow: hidden;
        flex-shrink: 0;
        flex-basis: 144px;
        border-radius: 8px;
        margin-right: 20px;
        height: 100%;

        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
          border: 1px #dcdee2 solid;
        }
      }

      .right {
        width: calc(100% - 144px - 20px);

        .name-level-dept-wrap {
          font-weight: 500;
          font-size: 52px;
          color: #333333;
          line-height: 1.34;
          display: flex;
          flex-direction: row;

          .item {
            display: flex;
            flex-wrap: nowrap;
            white-space: nowrap;
            overflow: hidden;
            flex-shrink: 0;
            flex-basis: 0;
          }

          .name-level {
            display: flex;
            flex-direction: row;
            flex-basis: calc(58% - 20px);
            margin-right: 20px;

            .item2 {
              display: flex;
              flex-wrap: nowrap;
              white-space: nowrap;
            }

            .name {
              width: 200px;
              font-size: 52px;
              color: #333333;
              margin-right: 26px;
              overflow: hidden;
              box-sizing: border-box;
              flex-shrink: 0;
            }

            .level {
              width: calc(100% - 200px - 26px);
              font-size: 30px;
              background: rgba(0, 89, 179, 1);
              border-radius: 10px;
              overflow: hidden;
              color: white;
              padding: 12px 12px;
              align-self: center;
              align-items: center;
              justify-content: center;
              flex-shrink: 0;
              box-sizing: border-box;
            }
          }

          .dept {
            flex-basis: 42%;
            font-size: 40px;
            color: #0059B3;
          }
        }

        .patient-wrap {
          width: 100%;

          // 不存在号别
          .patient-no-register-info {
            display: flex;
            flex-direction: row;
            background: linear-gradient(90deg, rgba(231, 235, 242, 0.8) 0%, rgba(216, 216, 216, 0.1) 100%);
            border-radius: 10px;
            margin-top: 20px;
            overflow: hidden;

            .patient {
              height: 98px;
              overflow: hidden;
              display: flex;
              flex-direction: row;
              flex-basis: 50%;

              .patient-type-sign {
                flex-basis: 124px;
                flex-shrink: 0;
                height: 100%;
                font-size: 42px;
                padding-left: 14px;
                justify-content: center;
                align-content: center;
                align-items: center;
                align-self: center;
                text-align: center;
                flex-wrap: nowrap;
                box-sizing: border-box;
              }

              .patient-content {
                display: flex;
                flex-direction: column;
                flex-shrink: 0;
                flex-basis: calc(100% - 124px);
                height: 70px;
                align-items: center;
                align-self: center;
                justify-content: center;
                overflow: hidden;

                .patient-item {
                  width: calc(100%);
                  font-size: 42px;
                  color: #333333;
                  line-height: 1.4;
                  white-space: nowrap;
                }
              }
            }

            .current-patient {
              .patient-type-sign {
                background: transparent;
                color: rgba(0, 89, 179, 1);
              }

              .patient-content {
                .patient-item {
                  color: rgba(0, 89, 179, 1);
                }
              }

              .current-patient-content {
                justify-content: flex-start;

                .patient-item {
                  line-height: 1.5;
                }
              }

            }

            .wait-patient {

              .patient-type-sign {
                background: transparent;
                color: rgba(229, 134, 2, 1);
              }

              .patient-content {
                .patient-item {
                  color: rgba(229, 134, 2, 1);
                }
              }

              .wait-patient-content {
                justify-content: flex-start;

                .patient-item {
                  line-height: 1.5;
                }
              }
            }
          }

          // 存在号别
          .patient-register-info {
            display: flex;
            flex-direction: row;
            background: linear-gradient(90deg, rgba(231, 235, 242, 0.8) 0%, rgba(216, 216, 216, 0.1) 100%);
            border-radius: 8px;
            margin-top: 10px;
            overflow: hidden;

            .patient-info {
              flex-shrink: 0;
              margin-right: 20px;
              flex-grow: 1;
              height: 118px;
              box-sizing: border-box;
              width: calc(100% - 42% - 20px);
              display:flex;
              flex-direction: column;
              justify-content: center;
            }

            .patient-info-only {
              height: 118px;

              .patient {
                height: 100%;
              }
            }

            .register-info {
              flex-shrink: 0;
              width: 42%;
            }

            .patient {
              height: 50px;
              overflow: hidden;
              display: flex;
              flex-direction: row;
              flex-basis: 50%;

              .patient-type-sign {
                flex-basis: 134px;
                flex-shrink: 0;
                height: 100%;
                font-size: 40px;
                padding-left: 14px;
                justify-content: center;
                align-content: center;
                align-items: center;
                align-self: center;
                text-align: center;
                flex-wrap: nowrap;
                box-sizing: border-box;
              }

              .patient-content {
                display: flex;
                flex-direction: column;
                flex-shrink: 0;
                flex-basis: calc(100% - 134px);
                align-items: start;
                height: 100%;
                align-self: center;
                justify-content: center;
                overflow: hidden;

                .patient-item {
                  width: calc(100%);
                  font-size: 40px;
                  color: #333333;
                  line-height: 1.4;
                  white-space: nowrap;
                }
              }
            }

            .current-patient {
              .patient-type-sign {
                background: transparent;
                color: rgba(0, 89, 179, 1);
              }

              .patient-content {
                .patient-item {
                  color: rgba(0, 89, 179, 1);
                }
              }

              .current-patient-content {
                justify-content: flex-start;

                .patient-item {
                  line-height: 1.5;
                }
              }

            }

            .wait-patient {
              .patient-type-sign {
                background: transparent;
                color: rgba(229, 134, 2, 1);
              }

              .patient-content {
                .patient-item {
                  color: rgba(229, 134, 2, 1);
                }
              }

              .wait-patient-content {
                justify-content: flex-start;

                .patient-item {
                  line-height: 1.5;
                }
              }
            }
          }

        }
      }

    }
  }
}
</style>